<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>性别统计</title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="main" style="width: 700px;height:600px;">

    </div>

</body>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    $.get("/reg/sexStat" , function (backdata) {
        // myChart.setOption({
        //     legend: {
        //         top: 'bottom'
        //     },
        //     toolbox: {
        //         show: true,
        //         feature: {
        //             mark: { show: true },
        //             dataView: { show: true, readOnly: false },
        //             restore: { show: true },
        //             saveAsImage: { show: true }
        //         }
        //     },
        //     series: [
        //         {
        //             name: 'Nightingale Chart',
        //             type: 'pie',
        //             radius: [50, 250],
        //             center: ['50%', '50%'],
        //             roseType: 'area',
        //             itemStyle: {
        //                 borderRadius: 8
        //             },
        //             data: backdata.data
        //         }
        //     ]
        // })


        myChart.setOption({
            title: {
                text: '男女比例图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ["女","男"]
            },
            series: [
                {
                    type: 'pie',
                    radius: '65%',
                    center: ['40%', '50%'],
                    selectedMode: 'single',
                    data: backdata.data,
                }
            ]
        })

    });


</script>
</html>